<template>
  <div class="zb-pup-bg " @click="close" :class="{on: show}"></div>
  <div class="zb-pup-box " :class="{on: show}">
    <div v-if="title" class="title">{{title}}</div>
    <span class="close" @click="close"><icon name="el-icon-CloseBold" :size="16" color="#000" /></span>
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, computed, reactive, ref } from 'vue';
const props = defineProps({
  show: { type: Boolean, default:false },
  title: { type: String, default:'' },
})
const show = ref(false);
const emits = defineEmits(['open'])
const open = () => {
  show.value = true;
}
const close = () => {
  show.value = false;
}
defineExpose({
  open,
  close
})
</script>

<style lang="scss" scoped>
.zb-pup-bg{
  width: 100%; height: 100%; position: fixed; left: 100%; top:0; z-index: var(--zindex1); background-color: rgba(0, 0, 0, 0.5);
  transition: opacity ease .3s; opacity: 0;
  &.on{display: block; left: 0; opacity: 1;}
}
.zb-pup-box{
  background-color: #fff; border-radius: 0.3rem 0.3rem 0 0; position: fixed; left: 0; bottom: 0; width: 100%; z-index: var(--zindex2); overflow: hidden; transform: translateY(100%); transition: all ease .3s; 
  &.on{transform: translateY(0)}
  .title{font-size: 0.36rem; text-align: center; line-height: 1.4rem; margin-bottom: 0.1rem; font-weight: bold;}
  .close{
    position: absolute; right: 0; top:0.2rem; display: flex; align-items: center; justify-content: center; width: 40px; height:40px;
    :deep(.el-icon){font-size: 0.4rem !important;}
  }
}
</style>